import React, { useEffect, useRef } from "react";
import * as echarts from "echarts";
type Props = {};

const First = (props: Props) => {
  const keywords = useRef<any>();
  useEffect(() => {
    const myChart = echarts.init(keywords.current);
    option && myChart.setOption(option);
  }, []);
  const categories = (function () {
    let now = new Date();
    let res = [];
    let len = 10;
    while (len--) {
      res.unshift(now.toLocaleTimeString().replace(/^\D*/, ""));
      now = new Date(+now - 2000);
    }
    return res;
  })();
  const categories2 = (function () {
    let res = [];
    let len = 10;
    while (len--) {
      res.push(10 - len - 1);
    }
    return res;
  })();
  const data = (function () {
    let res = [];
    let len = 10;
    while (len--) {
      res.push(Math.round(Math.random() * 1000));
    }
    return res;
  })();
  const data2 = (function () {
    let res = [];
    let len = 0;
    while (len < 10) {
      res.push(+(Math.random() * 10 + 5).toFixed(1));
      len++;
    }
    return res;
  })();
  const option = {
    title: {
      text: "近一周售票量",
      textStyle: {
        color: "#00CBA8",
        fontSize: 16,
        fontWeight: 500,
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#283b56",
        },
      },
    },
    legend: {
      borderRadius: "100%",
      itemWidth: 10,
      itemHeight: 10,
    },
    toolbox: {
      show: true,
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {},
      },
    },
    dataZoom: {
      show: false,
      start: 0,
      end: 100,
    },
    grid: [
      {
        bottom: 20,
        top: 90,
      },
    ],
    xAxis: [
      {
        type: "category",
        data: [
          "2022-10-11",
          "2022-10-13",
          "2022-10-15",
          "2022-10-17",
          "2022-10-19",
          "2022-10-11",
          "2022-10-13",
          "2022-10-15",
          "2022-10-17",
          "2022-10-19",
        ],
        axisTick: {
          //x轴刻度线
          show: false,
        },
      },
      {
        type: "category",

        data: categories2,
        axisTick: {
          //x轴刻度线
          show: false,
        },
        axisLabel: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        scale: true,
        name: "售票数量(张)",
        max: 30,
        min: 0,
        boundaryGap: [0.2, 0.2],

        axisTick: {
          //y轴刻度线
          show: false,
        },
        nameTextStyle: {
          color: "#ED729C",
        },
      },
      {
        type: "value",
        scale: true,
        name: "销售金额(元)",
        max: 1200,
        min: 0,
        boundaryGap: [0.2, 0.2],
        axisTick: {
          //y轴刻度线
          show: false,
        },
        nameTextStyle: {
          color: "#00ACBD",
        },
      },
    ],
    series: [
      {
        name: "Dynamic Bar",
        type: "bar",
        xAxisIndex: 1,
        yAxisIndex: 1,
        data: data,
        barWidth: 10,
        itemStyle: {
          color: "#EE729C",
        },
      },
      {
        name: "Dynamic Line",
        type: "line",
        symbol: "circle",
        symbolSize: 10,
        data: data2,
        smooth: true,
        itemStyle: {
          normal: {
            color: "#00ACBD", //改变折线点的颜色

            lineStyle: {
              color: "#00ACBD", //改变折线颜色
            },
          },
        },
      },
    ],
  };

  return <div ref={keywords} style={{ width: "100%", height: "100%" }}></div>;
};

export default First;
